import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm, Tabs } from 'antd'
import { Page } from 'components'
import queryString from 'query-string'
import CreatorList from './CreatorList'
import ActorList from './ActorList'
import Modal from './Modal'
import SubmitModal from './SubmitModal'
import config from '../../utils/config'
import localSession from '../../utils/localSession'

const { api } = config
const { targetHost } = api

const { TabPane } = Tabs

const Project = ({
  location, dispatch, project, loading,
}) => {
  location.query = queryString.parse(location.search)
  const { query, pathname } = location
  const {
    projectCreator, projectActor, currentItem, modalVisible, submitModalVisible, users, groups, file
  } = project

  const showModal = () => {
    dispatch({
      type: 'project/showModal',
    })
  }

  const modalProps = {
    users,
    groups,
    item: currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['project/update'],
    title: currentItem.id ? '编辑项目' : '创建项目',
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: 'project/save',
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'project/hideModal',
      })
    },
  }

  const submitModalProps = {
    users,
    groups,
    file,
    item: currentItem,
    visible: submitModalVisible,
    maskClosable: false,
    dispatch,
    confirmLoading: loading.effects['project/submit'],
    title: '提交数据',
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: 'project/submit',
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'project/hideSubmitModal',
      })
    },
  }

  const listProps = {
    dataSource: projectCreator.list,
    loading: loading.effects['project/queryCreator'],
    pagination: projectCreator.pagination,
    location,
    onChange (page) {
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onExportItem (param) {
      window.open(`${targetHost}/project/export/${param.id}?token=${localSession.getToken()}`)
    },
    onEditItem (param) {
      dispatch({
        type: 'project/info',
        payload: {
          id: param.id,
          type: 'showModal',
        },
      })
    },
    onCompleteItem (param) {
      dispatch({
        type: 'project/complete',
        payload: {
          id: param.id,
        },
      })
    },
  }

  const ActorListProps = {
    dataSource: projectActor.list,
    loading: loading.effects['project/queryActor'],
    pagination: projectActor.pagination,
    location,
    onChange (page) {
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onSubmitItem (param) {
      dispatch({
        type: 'project/info',
        payload: {
          id: param.id,
          type: 'showSubmitModal',
        },
      })
    },
  }

  const filterProps = {
    filter: {
      ...query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        search: queryString.stringify({
          ...value,
          page: 1,
          pageSize: projectCreator.pagination.pageSize,
        }),
      }))
    },
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/project',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/project',
      }))
    },
    onAdd () {
      dispatch({
        type: 'project/showModal',
        payload: {
          modalType: 'create',
        },
      })
    },
    switchIsMotion () {
      dispatch({ type: 'project/switchIsMotion' })
    },
  }

  return (
    <Page inner>
      <Tabs defaultActiveKey="1">
        <TabPane key="1" tab="管理的项目">
          <Button type="primary" style={{ marginBottom: '10px' }} onClick={showModal}>创建项目</Button>
          <CreatorList {...listProps} />
        </TabPane>
        <TabPane key="2" tab="参与的项目">
          <ActorList {...ActorListProps} />
        </TabPane>
      </Tabs>
      {modalVisible && <Modal {...modalProps} />}
      {submitModalVisible && <SubmitModal {...submitModalProps} />}
    </Page>
  )
}

Project.propTypes = {
  project: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ project, loading }) => ({ project, loading }))(Project)
